<template>
    <div class="table">
        <div  v-if="!tableData.food_table_action" class="zuozi">
            <h1>{{tableData.food_table_number}}</h1>
            <h3>{{tableData.food_table_type}}</h3>
             <p>{{tableData.food_table_peoples}}人卓</p>
            <button @click="Startdate">开始点菜</button>
        </div>
         <div  v-else class="tablezt">
            <h1>{{tableData.food_table_number}}</h1>
            <h3>{{tableData.food_table_type}}</h3>
            <p>{{tableData.food_table_peoples}}人卓</p>
            <el-button type="primary" size="mini" @click="Startdate">加菜</el-button>
            <el-button type="primary" size="mini" @click="jiezhang">结账</el-button>
        </div>
    </div>
</template>
<script>
    import * as api  from '../utils/api'
    export default {
        name: "Table",
        props:['tableData'],
        data(){
          return{
              tableShow:true
          }
        },
        created() {
            console.log(this.tableData)
        },
        methods:{
            Startdate(){
              let id = this.tableData.id
               this.$emit('startManu',id)
            },
            jiezhang(){
                let id = this.tableData.food_table_number
                this.$router.push({
                    path: `/home/shouyin/${id}`,
                })
            }
        }
    }
</script>

<style scoped lang="less" scoped>
    .zuozi{
        margin: 30px;
        float: left;
        color: white;
        width: 9rem;
        height: 10rem;
        background-color: #9e9e9e;
        h1{
            padding: 2px;
            text-align: center;
            margin: 0;
            background-color: #6a6a6a;
        }
        h3{
            padding:10px 6px;
        }
    }
    .tablezt{
        margin: 30px;
        float: left;
        color: white;
        width: 9rem;
        height: 10rem;
        background-color: #55a532;
           h1{
               padding: 2px;
               text-align: center;
               margin: 0;
               background-color: #6a6a6a;
           }
        h3{
            padding:10px 6px;
        }
        button{
            /*margin-left: 10px;*/
            width: 3.6rem;
            height: 2.5rem;
            padding: 0 3px 0 0;
        }

    }

</style>